<template>
  <div>
    <ul>
      <li v-for="item in links"><a href="{{item.url}}">{{item.name}}</a></li>
    </ul>
    <div style="clear: both"></div>
    <form action="#">
    名称：<input type="text" v-model="link.name" size="10">{{link.name}}<br>
    url: <input type="text" v-model="link.url" size="50">{{link.url}}<br>
    排序: <input type="text" v-model="link.ord"  size="10">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>
    <br>
    <button @click.prevent="add" style="color: black">提交</button>
    <br><br><br><br>
    </form>
  </div>
</template>

<script>
// import axios from 'axios';
import {get,post} from '../network/request';
export default {
  name: "Footer",
  data(){
    return{
      msg:'footer内容',
      links:[],
      link:{
        name:'',
        url:'',
        ord:0,
        do_submit:true,
      }

    }
  },
  mounted() {
    // axios.get('http://shopapi.cn/admin/linkx')
    //   .then(res=>{
    //     this.links = res.data;
    //   }).catch(error=>{
    //     console.log(error);
    // });
    //查询条件可以是name或者id 前提是接口有提供查询的方法和参数
    // get('/linkx',{name:1}).then(res=>{
    //   this.links = res.data;
    // }).catch(err => {
    //   console.log(err);
    // })
    get('/linkx',{}).then(res=>{
      this.links = res.data;
    }).catch(err => {
      console.log(err);
    })
  },
  methods:{
    add(){
      // console.log(this.link);
      // axios.post('http://shopapi.cn/admin/linkx/add',this.link,{
      //   transformRequest:[
      //     function(data){
      //       let str = '';
      //       console.log(data);
      //       for(let key in data){
      //         console.log(key);
      //         console.log(data[key]);
      //         str += encodeURIComponent(key) +
      //             '='
      //             + encodeURIComponent(data[key]) + '&'
      //       }
      //
      //       return str;
      //     }
      //   ],
      //   headers: {
      //     "Content-Type": "application/x-www-form-urlencoded"
      //   }
      // }).then(res=>{
      //   console.log(res);
      // }).catch(error=>{
      //   console.log(error);
      // });
      post('/linkx/add',this.link).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>

<style scoped>

  ul{
    list-style: none;
  }
  ul li{
    float: left;
    padding: 10px;
  }
  ul li a{
    color: white;
  }
</style>